<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>周考</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.common.dev.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
</head>
<body>
<h2>goodsType删除和修改</h2>

<div id="app">
    <!--update-->
    <div id="updateUI" style="display: none">
        <input type="hidden" v-model="updateForm.typeId">
        type_id: <input type="text" name="type_id" v-model="updateForm.type_id"> <br>
        type_name: <input type="text" name="type_name" v-model="updateForm.type_name"> <br>
        <button type="button" @click="update()">保存修改</button>
    </div>

    <!-- getAll -->
    <table>
        <tr>
            <td>type_id</td>
            <td>type_name</td>
            <td>operate</td>
        </tr>
        <tr v-for="gt in list">
            <td>{{gt.type_id}}</td>
            <td>{{gt.type_name}}</td>
            <td>
                <a @click="del(gt.type_id)">删除</a>
                |
                <a @click="updateUI(gt)">修改</a>
            </td>
        </tr>
    </table>
</div>

<script>
    axios.default.baseURL = "http://localhost:8080/web/";

    axios.interceptors.request.use(function(config){
        config.headers["Content-Type"] = "application/json";
        return config;
    });

    let app = new Vue({
        el: "#app",
        created(){
            this.getAll();
        },
        data:{
            saveForm:{
                type_name: ""
            },
            updateForm: {
                type_id: "",
                type_name: ""
            },
            layerWindow: "",
            list:[]
        },
        methods:{
            getAll(){
                let self = this;
                axios.get("goodstype").then(function(response){
                    console.log(response);
                    if (response.data.code == 200) {
                        self.list = response.data.data;
                        return;
                    }
                    console.log("有bug了-_-" + response.data.msg + "xcxc");
                });
            },
            add(){
                let self = this;
                axios.post("goodstype", this.saveForm).then(function(response){
                    self.getAll();
                    self.type_name = "";
                });
            },
            del(type_id){
                let self = this;
                axios.delete("goodstype/" + type_id).then(function(response){
                    self.getAll();
                });
            },
            updateUI(gt){
                this.updateForm.type_id = gt.type_id;
                this.updateForm.type_name = gt.type_name;

                this.layerWindow = layer.open({
                    title: "修改用户信息",
                    type: 1,
                    content: $("#updateUI")
                });
            },
            update(){
                let self = this;
                axios.put("goodstype", this.updateForm).then(function(response){
                    self.getAll();
                    self.type_id = self.type_name = "";
                    layer.close(self.layerWindow);
                });
            }
        }
    });
</script>

</body>